<template>
	<view class="contact">
		<view class="tit">
			<image src="../../static/first/zs.png"></image>
			<view>公司地址</view>
		</view>
		<view class="bird">
			<view v-for="(item,index) in cityList" :key="index" @click="changeContact(item.value,index)">
				<button style="font-size: 36rpx;" :class="{active:currentIndex===index}">
					{{item.value}}
				</button>
			</view>
		</view>
		<!-- 总部热线 -->
		<view>
			<view class="tit">
				<image src="../../static/first/zs.png"></image>
				<view>总部热线</view>
			</view>
			<view class="content" v-for="(item,index) in headquarters">
				<view class="phone">
					<text>{{item.phoneNumber}}</text>
					<!-- <view class="tel"> -->
					<image src="../../static/mine/tel.png"></image>
					<!-- </view> -->
				</view>
				<view class="adress">
					<text>地址：{{item.address}}</text>
					<text>{{item.workingHours}}</text>
				</view>

			</view>
		</view>
		<!-- 客服分公司 -->
		<view class="kefu" v-for="(item,index) in branchOffice" :key="index">
			<view class="tit">
				<image src="../../static/first/zs.png"></image>
				<view>{{item.companyName}}分公司热线</view>
			</view>
			<view class="content">
				<view class="phone">
					<text>{{item.phoneNumber}}</text>
					<!-- <view class="tel"> -->
					<image src="../../static/mine/tel.png"></image>
					<!-- </view> -->
				</view>
				<view class="adress">
					<text>地址：{{item.address}}</text>
					<text>{{item.workingHours}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityList: [],
				headquarters: [], //总部
				branchOffice: [], //分公司
				currentIndex: 0
			}
		},
		onLoad() {
			this.getCityList()
		},
		methods: {
			//获取城市列表
			getCityList() {
				uni.request({
					url: this.$serverUrl + '../dictDetail/map',
					data: {
						"dictName": "company_city"
					},
					success: (res) => {
						this.cityList = res.data.company_city
						this.changeContact(this.cityList[0].value, 0)
					},
					fail: (e) => {
						uni.showToast({
							title: '城市列表获取失败',
							icon: 'none'
						})
					}
				})
			},
			//获取联系方式
			changeContact(companyCity, index) {
				this.currentIndex = index
				this.headquarters = []
				this.branchOffice = []
				uni.request({
					url: this.$serverUrl + 'ftContactUs/getContactUsByCity',
					data: {
						"companyCity": companyCity
					},
					method: 'POST',
					success: (res) => {
						let that = this
						let data = res.data
						for (let i = 0; i < data.length; i++) {
							if (data[i].companyCity == undefined) {
								that.headquarters.push(data[i])
							} else {
								that.branchOffice.push(data[i])
							}
						}
					},
					fail: (e) => {
						uni.showToast({
							title: '公司热线获取失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	/* 点击切换默认按钮颜色 */
	.active {
		background-color: #00B2CA;
		color: #FFFFFF;
		font-size: 28upx;
		width: 160upx;
		height: 80upx;
		line-height: 80upx;
	}

	.contact {
		margin: 36upx;
	}

	.tit {
		display: flex;
		align-items: flex-end;
	}

	.tit image {
		width: 22upx;
		height: 26upx;
	}

	.tit view {
		margin-left: 26upx;
		font-size: 36upx;
		font-weight: bold;
	}

	.bird {
		margin-top: 36upx;
		margin-bottom: 88upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.bird view {
		width: 160upx;
		height: 80upx;
		line-height: 80upx;
		background-color: #F5F5F5;
		margin: 26upx 5upx;
	}

	.content {}

	.phone {
		margin: 42upx 0 34upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.phone text {
		font-weight: bold;
	}

	.phone image {
		width: 52upx;
		height: 52upx;
	}

	.adress {
		color: #666666;
		font-size: 26upx;
		display: flex;
		flex-direction: column;
	}

	.adress text {
		margin-bottom: 18upx;
	}

	.kefu {
		margin-top: 88upx;
	}
</style>
